<template>

    <!-- 组件的模板 -->
    <div class="page__bd">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);" @click="toSearch">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
        </div>
    </div>
    <div class="page user-select multi-select">
     <ul class="list com-border-top com-border-bottom" style="margin-top:0" :style="isIphoneX?'margin-bottom: 37px;':''">
          <li class="weui-cells_checkbox" v-for="member in memberList">
              <label class="touch" for="{{member.user_id+'member'}}">
                    <input value="{{member.user_id}}"
                           v-model="selectMemberList"
                           type="checkbox"
                           class="weui-check"
                           name="member"
                           id="{{member.user_id+'member'}}"
                    >
                    <!-- <input value="{{member.user_id}}"
                           v-model="selectMemberList"
                           type="checkbox"
                           class="weui-check"
                           name="member"
                           id="{{member.user_id+'member'}}"
                           disabled="{{member.notSelect && member.notSelect == 1}}" 
                    > -->
                  <i class="weui-icon-checked"></i>
                  <img v-if="member.logo.thumb_url!=''" class="avatar" :src="member.logo.thumb_url">
                  <img v-if="member.logo.thumb_url==''" class="avatar" src="../../static/imgs/avatar.png">
                  <div class="info com-border-bottom">
                      <p class="name">{{member.nick_name}}
                        <span class="tag tag_1" v-if="member.identity!=999999" 
                              :class="{'tag tag_1':member.identity==2||member.identity==1,
                                       'tag tag_2':member.identity==3}">{{member.identity_str}}</span>
                      </p>
                      <span class="state" v-if="member.normal">{{member.normal}}</span>
                  </div>
              </label>
          </li>
    </ul>
    <div class="count bg-color com-border-top weui-cells_checkbox" :style="isIphoneX?'height: 75px;':''" v-if="memberList.length || grouplist.length">
            <label for="sa">
                <input type="checkbox" class="weui-check" name="select-all" id="sa" :checked="isSelectAll"  @click="selectAll($event)">
                <i class="weui-icon-checked"></i><span>全选</span>                
            </label>
            <span class="num">已选择：<em>{{selectMemberList.length}}人</em></span>
            <a class="mod-btn-s-1" @click="submitResult" href="javascript:;">确定</a>
        </div>
    </div>
   </div>
</template>

<script>
    let pageDate = {}
    let webViewID = ''
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */

    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import widget from 'gapi/widget'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import Scroller from 'vux/dist/components/scroller'

    /**
     *  组件实例对象
     */
    export default {
        components: {
          Scroller
        },
        data: function(){
            return{
                id:'',
                hierarchyList:[],
                selectMemberList:[],
                selectGroupList:[],
                grouplist:[],
                memberList:[],
                cacheGroupList:[],
                group:{},
                type_id:'',  // 从工资进入--判断是否从工资进入 type_id==1为工资进入，否则不是
                is_empty:'',   // 从工资进入--判断是否是从空太页面进入
                start_date:'', //从工资进入会有开始日期和结束日期
                end_date:''
            }
        },
        computed: {
            isSelectAll (){
                let result = false
                if(this.grouplist.length||this.memberList.length){
                    result = true
                    this.grouplist.forEach((item)=>{
                        if(this.selectGroupList.indexOf(item.id+'')==-1){
                              result = false
                        }
                    })
                    this.memberList.forEach((item)=>{
                      if(this.selectMemberList.indexOf(item.user_id+'')==-1){
                            result = false
                      }
                    })
                }
                return result
            },
            isIphoneX: function(){
                return util.isIphoneX()
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */

            init (){
                //从工资进入--判断是否从工资进入 type_id==1为工资进入，否则不是
                this.type_id = util.getUrddataString('type_id')  
                // 从工资进入--判断是否是从空太页面进入
                this.is_empty = util.getUrddataString('is_empty')  
                // this.is_empty = 1
                this.start_date = util.getUrddataString('start_date')  
                this.end_date = util.getUrddataString('end_date') 
                
                cache.getCache('KqCacheMessge',(data)=>{
                    console.log(JSON.stringify(data))
                    pageDate.project_id = data.project_id
                    pageDate.team_id = data.team_id
                    pageDate.user_id = data.user_id    
                    this.id = util.getUrddataString('id')
                    this.getGroupList()
                })
                commonPage.getWebViewID((data)=>{
                    webViewID = data
                })
            },
            selectMemberByGroupId(id,event){
                  let list = []
                  let label = event.target.checked
                  let setChildGroup = (group) => {
                    group.forEach((o, i, a) => {
                      group[i].memberList.forEach((oo, ii, aa) => {
                           list.push(oo.user_id+'')
                      })
                      if(o.children.length > 0){
                        setChildGroup(o.children)
                      }
                    })
                  }
                  let setCurrentGroup = (group) => {
                    group.some((o, i, a) => {
                    if(o.id == id){
                        o.memberList.forEach((oo, ii, aa) => {
                            list.push(oo.user_id+'')
                        })
                        if(o.children.length){
                            setChildGroup(o.children)
                        }
                        return true
                      }
                    })
                  }
                setCurrentGroup(this.grouplist)
                if(label){
                    this.selectMemberList = this.group.addArrarItem(this.selectMemberList,list)
                    //console.log(this.selectMemberList)
                }else{
                    this.selectMemberList = this.group.removeArrarItem(this.selectMemberList,list)
                    //console.log(this.selectMemberList)
                }
            },
            //全选按钮
            selectAll(event){//is_select  0 正常 1被选中
                let label = event.target.checked
                let list = []
                let groupList = []
                this.grouplist.forEach((item)=>{
                    groupList.push(item.id+'')
                    this.selectMemberByGroupId(item.id,event)
                })
                this.memberList.forEach((item)=>{
                   if( !item.notSelect && item.notSelect != 1){
                      list.push(item.user_id+'')
                   }
                   
                })
                if(label){
                    this.selectMemberList = this.group.addArrarItem(this.selectMemberList,list)
                    this.selectGroupList = this.group.addArrarItem(this.selectGroupList,groupList)
                }else{
                    this.selectMemberList = this.group.removeArrarItem(this.selectMemberList,list)
                    this.selectGroupList = this.group.removeArrarItem(this.selectGroupList,groupList)
                }
            },
            // 当前页面数据处理
            showGroup(id,list){
                list.some((item)=>{
                  if(item.id==id){
                      item.path.splice(0,1)//人员选择去掉全部一级
                      this.hierarchyList = item.path
                      this.grouplist = item.children
                      //按照成员身份由高到低
                      item.memberList.sort(function(a,b){
                        return a.identity-b.identity;
                      });
                      // this.memberList = item.memberList
                      let len = this.hierarchyList.length-1
                      cache.setMemoryCache('webViewID'+len,{'webViewID':webViewID})//保存当前页面唯一标识，点击面包屑使用
                      return true
                  }else{
                      this.showGroup(id,item.children)
                  }
              })
            },
            // 获取小组列表
            getGroupList(){
                let _data = {
                        team_id:pageDate.team_id,
                        project_id: pageDate.project_id,
                        type_id:this.type_id,
                        start_date:this.start_date,
                        end_date:this.end_date
                    }
                //console.log(_data)
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/group/node_tree',
                    data: _data,
                    success: (res) => {
                        commonPage.loadPageStatus('loadSuccess')
                        if(res&&res.errno==0){
                            this.cacheGroupList = res.data
                            this.group = new GroupUtil(this.cacheGroupList)
                            let allMemberList = this.group.formatMember(this.cacheGroupList)
                            let newArr = [];
                            this.memberList = res.data[0].memberList;
                            cache.setMemoryCache('allMemberList', allMemberList)
                            // alert(JSON.stringify(allMemberList))
                            if(this.is_empty && this.is_empty == 1){
                                let selectM = [],
                                    memberAr = this.memberList;
                                for(let i = 0,lg = memberAr.length; i < lg ; i++){
                                    if(memberAr[i].normal != '未出勤' && memberAr[i].user_id != pageDate.user_id){
                                        selectM.push(memberAr[i].user_id)
                                    }

                                }
                                // this.memberList.forEach( (item) => {
                                //     if(item.normal != '未出勤' && item.user_id != pageDate.user_id){
                                //         selectM.push(item.user_id)
                                //     }
                                // })
                                if(selectM.length){
                                  this.selectMemberList = selectM
                                }
                                if(selectM.length && !this.id){
                                  //widget.toast('已默认选中出勤人员')
                                }
                            }
                            
                        }else if(res.errmsg){
                             widget.toast(res.errmsg)
                        }else{
                            widget.toast('获取成员列表失败')
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                      commonPage.loadPageStatus('loadSuccess')
                      widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //提交
            submitResult() {
                var participantMember = this.selectMemberList
                cache.getMemoryCache('webViewID',(data)=>{
                  //console.log(data)
                    if(data){
                      commonPage.goBack(1,{'key':'participantMember','value':participantMember},data.webViewID)
                    }
                })
                
            },
            /**
             * 跳转搜索页
             * @return {}
             */
            toSearch(){
                cache.setMemoryCache('participantMember',this.selectMemberList)
                window.location.href="dmsaas://KaoqinMemberSearch"
            }
        },
        created(){
            this.init()
            window.loadData = (data)=>{
                //console.log(data)
                if(data&&data.key == 'participantMember'){
                    cache.getMemoryCache('cacheGroupList',(item)=>{
                        //console.log(this.group)
                        this.group.group = item
                        this.selectMemberList = data.value
                     })
                }
            }

        },
        ready(){
            commonPage.updateTitleBar({
              backAction: 'gotoback',
              leftAction: 'gotoback'
            })
            window.gotoback = () => {
                if(this.id){
                  commonPage.goBack(1,{'key':'participantMember','value':this.selectMemberList})
                }else{
                  commonPage.goBack(1)
                }
            }
        }
    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
<style>
  .scroller-wrap .nav-item{
    float: left;
  }
  .mod-crumbs .arrow.nav-item{
    margin: 18px 8px;
  }
  .xs-container{
    background: #fff;
  }
</style>
